<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="商品主题">
                <div class="app-container" style="float: left">
                    <el-form ref="searchForm" :model="searchForm" style="width:400px">
                        <el-form-item>
                            <el-input v-model="searchForm.goodsName"  placeholder="主题名" size="mini" style="width:60%;padding-right: 10px;"></el-input>
                            <el-button size="mini"  type="primary"  @click="handleDataSelect()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="app-container" style="float: right">
                    <el-button size="mini"  type="primary" @click="handleAdd()">新增</el-button>
                    <el-button size="mini"  type="primary" @click="handleUse()">启用</el-button>
                    <el-button size="mini"  type="primary" @click="handleNoUse()">禁用</el-button>
                </div>
                <div>
                    <el-table :data="tableData" style="width: 100%;" border 
                     @row-click="handleRowClick"  @selection-change="handleSelectionChange" >
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="xh" align="center" width="120"  type="index" label="序列"/>
                        <el-table-column prop="themeName" align="center" label="主题名称"/>
                        <el-table-column prop="status" align="center" label="状态">
                            <template #default="scope">
                                <span v-if="scope.row.isEnable == 1">启用</span>
                                <span v-if="scope.row.isEnable == 0">禁用</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime"  align="center" label="创建时间"/>
                        <el-table-column fixed="right" align="center" label="操作" width="150">
                            <template #default="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" type="primary">编辑</el-button>
                                <el-popconfirm title="确定删除吗"
                                               confirmButtonText="确定"
                                               cancelButtonText="取消"
                                               :icon="InfoFilled"
                                               icon-color="red"
                                               @confirm="handleDel(scope.$index,scope.row)">
                                    <template #reference>
                                        <el-button size="mini" type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页-->
                <div style="margin-left: 20px">

                    <el-pagination
                            v-model:currentPage="currentPage"
                            :page-sizes="[5]"
                            :page-size="currentSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                    </el-pagination>

                </div>
                <div>
                    <el-dialog v-model="dialogFormVisible" title="新增主题"  width="30%">
                        <el-form :model="form" :rules="formRules">
                            <el-form-item>
                                <el-input v-model="form.themeName"  size="small" style="width:80%" placeholder="添加主题"></el-input>
                            </el-form-item>
                           <!-- <el-form-item>
                                <el-input v-model="form.themeCode" readonly="true"  size="small" style="width:80%" placeholder="添加编号"></el-input>
                            </el-form-item>-->
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button type="primary" size="mini"  style="margin-left: 10px;" @click="ThemeSubmit()">确定</el-button>
                                <el-button @click="handleCancle()" style="margin-left: 10px;"  size="mini">取消</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane label="新闻发布">


            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import request from "../../utils/request";
    import {ElMessage, ElMessageBox} from "element-plus";

    export default {
        name: "DataManager",
        data(){
            return{
                dialogFormVisible:false,
                formRules:{
                    themeName:[
                        {required:true,message:"主题名不能为空",trigger:"blur"}
                    ]
                },
                form:{},
                //-----数据集合---------------
                tableData: [],
                //变量：当前页
                currentPage:1,
                //每页多少条
                currentSize:5,
                //变量：总记录数
                total:0,
                searchForm:[],
                //启用禁用时主题ids
                themeIds:[]
            }
        },
        created(){
            this.handleDataList();
        },
        methods: {
            //主题添加
            ThemeSubmit(){
                request.post("/api/theme/addTheme",this.form).then(resp=>{
                    if(resp.status =='M0200'){
                        //提示
                        ElMessage({
                            message:"添加成功",
                            type:"success"
                        });
                        this.handleDataList();
                        this.form.themeName='';
                    }else{
                        ElMessage({
                            message:resp.msg,
                            type:"error"
                        })
                    }
                })
            },
            handleAdd(){
                this.dialogFormVisible=true;
            },
            handleUse(){
                if(this.themeIds==''){
                        ElMessage({
                            message:"还没有选中要启用的主题",
                            type:"warning"
                        })
                    return;
                }

                let data={
                    'ids':this.themeIds,
                    'operatorType':'1'
                }
                request.post("/api/theme/updateIsEnable",data).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                    this.handleDataList()
                })
            },
            handleNoUse(){
                if(this.themeIds==''){
                        ElMessage({
                            message:"还没有选中要禁用的主题",
                            type:"warning"
                        })
                    return;
                }
                let data={
                    'ids':this.themeIds,
                    'operatorType':'0'
                }
                request.post("/api/theme/updateIsEnable",data).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                    this.handleDataList()
                })
            },
            handleRowClick(row){
                this.$refs.configTableRef.toggleRowSelection(row)  
            },
            handleSelectionChange(targetList){
               // 数据处理传参使用
                let queryValueList = []
                targetList.forEach(ite => {
                    queryValueList.push(ite.id)
                })
                this.themeIds = queryValueList     
            },
            handleDataList(){
                request.get("/api/theme/getThemeInfo",{
                    params:{
                        currentPage:this.currentPage,
                        currentSize:this.currentSize,
                        search:this.searchForm.goodsName
                    }
                }).then(resp=>{
                    if(resp.status =='M0200'){
                        this.tableData=resp.data.list;
                        this.total = resp.data.total;
                    }else{
                        ElMessage({
                            message:"添加失败:",
                            type:"error"
                        })
                    }
                })
            },
            handleDataSelect(){
                request.get("/api/theme/getThemeInfo",{
                    params:{
                        currentPage:this.currentPage,
                        currentSize:this.currentSize,
                        search:this.search
                    }
                }).then(resp=>{
                    if(resp.status =='M0200'){
                        this.tableData=resp.data.list;
                        this.total = resp.data.total;
                    }else{
                        ElMessage({
                            message:"添加失败:",
                            type:"error"
                        })
                    }
                })
            },
            handleCancle(){
                this.form.themeName='';
                this.dialogFormVisible=false;
            },
            handleDel(index,item){
                if(item.isEnable=='1'){
                    ElMessage({message:"必须禁用状态才能删除",type:"warning"});    
                    return;
                }
                request.post("/api/theme/themeDel",item).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:"删除成功",
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:"删除失败:"+res.msg,
                            type:"error"
                        })
                    }
                    this.handleDataList()
                })
            },
            handleCurrentChange(v){
                this.currentPage=v
                this.handleDataList()
            },
            handleSizeChange(v){
                this.currentSize=v
                this.handleDataList()
            },
        }
    }
</script>

<style scoped>

</style>
